<template>
  <div class="ta-searcharea">
    <div class="ta-searcharea__item">
      <span class="label">分类：</span>
      <el-button
        style="padding:7px 15px"
        v-for="(option, oi) in [{ title: '全部', value: '', _id: '' }, ...this.sortList]"
        :key="oi"
        size="mini"
        :type="(option._id === sortId) ? 'primary' : 'text'"
        @click="setSort(option)">
        {{ option.title }}
      </el-button>
    </div>
    <div class="ta-searcharea__item">
      <span class="label">标签：</span>
      <el-button
        style="padding:7px 15px"
        v-for="(option, oi) in [{ title: '全部', value: '', _id: '' }, ...this.tagList]"
        :key="oi"
        size="mini"
        :type="(option._id === tagId) ? 'primary' : 'text'"
        @click="setTag(option)">
        {{ option.title }}
      </el-button>
    </div>
    <div class="ta-searcharea__item">
      <span class="label">状态：</span>
      <el-button
        style="padding:7px 15px"
        v-for="(option, oi) in [{ title: '全部', value: '' }, ...this.blogStates]"
        :key="oi"
        size="mini"
        :type="option.value === state ? 'primary' : 'text'"
        @click="setState(option)">
        {{ option.title }}
      </el-button>
    </div>
    <div class="ta-searcharea__item">
      <span class="label">搜索：</span>
      <el-input
        placeholder="标题,描述,作者"
        v-model="keyword"
        style="max-width:300px;"
        @keydown.enter.native="getBlogList(1)">
      </el-input>
      <el-button
        type="primary"
        icon="el-icon-search"
        :loading="loading"
        @click="getBlogList(1)"
        v-waves>
        搜索
      </el-button>
    </div>

    <!-- <div class="ta-searcharea__item">
      <span class="label">状态:</span>
      <el-button
        style="padding:7px 15px"
        v-for="(item, i) in "
        :key="i"
        size="mini"
        :type="item.value === state ? 'primary' : 'text'"
        @click="setState(item)">
        {{ item.title }}
      </el-button>
    </div> -->
  </div>
</template>

<script>
    import { mapGetters } from 'vuex'
    export default {
      data() {
        return {
          keyword: '',
          loading: false,
          seachBarData: [],
          sortId: '',
          tagId: '',
          state: ''
        }
      },
      methods: {
        setSort(id) {
          this.sortId = id._id
          this.sortObj = id
        },
        setTag(id) {
          this.tagId = id._id
          this.tagObj = id
        },
        setState(state) {
          this.state = state.value
          this.stateObj = state
        },
        async getBlogList(index, size) {
          this.loading = true
          try {
            await this.$store.dispatch('GetBlogList', {
              keyword: this.keyword,
              sort: this.sortObj || '',
              tag: this.tagObj || '',
              state: this.stateObj || '',
              pageindex: index,
              pagesize: size
            })
            this.loading = false
          } catch (e) {
            this.loading = false
          }
        }
      },
      computed: {
        ...mapGetters([
          'sortList',
          'tagList',
          'blogStates'
        ])
      }
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.ta-searcharea {
  padding: 0 15px;
  background: #fff;
  border-radius: 2px;
  margin-bottom: 10px;
  font-size: 14px;
  .ta-searcharea__item {
    padding: 10px 0;
    border-bottom: 1px dashed #e9eaec;
    .label {
      margin-right: 15px;
    }
  }
}
</style>
